<template>
	<!-- 详情页列表 -->
	<view>
	<view class="bg" :style="{'background':'url('+playList.coverImgUrl+')'}">
	<!-- <view class="bg"> -->
	</view>
	<musicHeader :icon=true title='歌单' color='#fff'></musicHeader>
	<view class="container" v-show="!loading">
		<!-- 设置滚动区域 -->
	<scroll-view scroll-y="true" >
		<view class="list">
					<view class="list-head">
						<!-- 头部 -->
						<view class="list-head-top">
							<!-- 左边图片 -->
						<view class="list-head-top-img">
							<image :src="playList.coverImgUrl" mode=""></image>
							<text><u-icon name='play-right'></u-icon>{{playList.playCount | count }} </text>
						</view>
						<!-- 右边的文字 -->
						<view class="list-head-top-right">
							<view>{{playList.name}}</view>
							<view><image :src="playList.creator.avatarUrl" mode=""></image> {{playList.creator.nickname}} </view>
							<view>{{playList.description}}</view>
						</view>
					</view>
					<!-- 分享微信好友 -->
					<view class="list-head-share">
						<!-- <view class=""> -->
							<button open-type="share">
							<u-icon name='share'></u-icon>
							分享给微信好友
							</button>
						<!-- </view> -->
					</view>
				
				</view>
				<!-- 歌曲的列表 -->
				<view class="list-music">
					<view class="list-music-item">
						<view class="list-music-top">
							<u-icon name='play-circle' style="position: relative;top: 5px;" size="30px"></u-icon>
							<text>播放全部</text>
							<text>(共{{playList.trackCount}}首)</text>
						</view>
					
					<view class="list-music-list">
					<!-- 	<view class="music-list">
							<text class="index">1</text>
							<view class="musicName">
								<text>与我无关</text>
								<text style="font-size: 12px;">啊冗 - 与我无关</text>
							</view>
							<u-icon name='play-circle' style="position: relative;top: 5px;" size="30px"></u-icon>
						</view> -->
					<view class="music-list" v-for="(item,i) in playList.tracks" :key='i' @click="handClick(item.id)">
						<text class="index">{{i+1}}</text>
						<view class="musicName">
							<text>{{item.name}}</text>
							<text style="font-size: 12px;">{{item.ar[0].name}}</text>
						</view>
						<u-icon name='play-circle' style="position: relative;top: 5px;" size="30px"></u-icon>
					</view>
										
									
															
					</view>
					</view>
				</view>
			</view>
		
		</scroll-view>
	</view>
	
	</view>
</template>

<script>
	import musicHeader from '../../components/musicHeader/musicHeader.vue'
	import {list} from '../../api/api.js'
	export default {
		components:{
			musicHeader
		},
		data() {
			return {
				playList:{
					coverImgUrl:'',//防止初始化为空，先给一个空值 背景图片
					name:'', //标题
					playCount:'',//播放量
					description:'',// 描述
					trackCount:'',//总数量
					creator:{
						avatarUrl:'', //小图标
						nickname:'', //小图标的名称
					},
					tracks:[]//视频列表
				},
				loading:true,// 防止数据还没有渲染进来先出现样式
			}
		},
		onLoad(option){
			uni.showLoading({
			    title: '加载中'
			});
			list(option.id).then((res)=>{
				if(res[1].data.code == '200') {
					this.playList = res[1].data.playlist
					console.log(this.playList)
<<<<<<< HEAD
=======
					this.$store.commit('listId',res[1].data.privileges)
>>>>>>> detail
				}
				this.loading = false
				  uni.hideLoading();
			})
			
		},
		methods: {
			handClick(id){
				uni.navigateTo({
					url: "../detail/detail?id="+id,
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.list-head {
		margin:35px 30px 0px;
}
.list-head-top {
	width: 100%;
	margin:30px 0;
	margin-bottom: 0px;
	display: flex;
}
.list-head-top-img {
	width: 180px;
	height: 180px;
	position: relative;
	margin-right: 10px;
	image {
		width: 130px;
		height: 130px;
		border-radius: 10px;
	}
	text {
		position: absolute;
		top: 8px;
		right: 36px;
		color: #fff;
	}
	
}
.list-head-top-right view:nth-child(1){
	color:#fff;
	font-size: 20px;
}
.list-head-top-right view:nth-child(2){
	margin: 14px 0;
	color: #fff;
	image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 10px;
	}
}
.list-head-top-right view:nth-child(1){
	color:#fff;
	font-size: 20px;
}
.list-head-top-right view:nth-child(3){
	color:#fff;
	font-size: 12px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 144px;
}
// 分享微信
.list-head-share {
	button {
		    margin: 0 auto;
		    width: 164px;
		    height: 33px;
		    color: #fff;
		    background: rgba(0, 0, 0, 0.4);
		    border-radius: 20px;
		    text-align: center;
		    line-height: 33px;
		    font-size: 14px;
	}

}

// 歌曲列表
.list-music-item {
	margin:35px 30px 0px;
}
.list-music {
	width: 100vw;
	// height: 100vh;
	background-color: #fff;
	margin-top:30px ;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	color: #000;
}
.list-music-top {
	font-size: 18px;
	text{
		margin:0 8px;
		
	}
}
.list-music-top text:nth-child(3){
	font-size: 14px;
}
.music-list {
	width: 100%;
	height:80px ;
	// background-color: #ccc;
	display: flex;
	align-items: center;
	.index {
		font-size: 20px;
		color: #919191;
	}
	.musicName {
		flex: 1;
		margin-left: 20px;
		display: flex;
		flex-direction:column;
		font-size: 18px;
	}
}

</style>
